<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>简单文字动画</title>
        <style>
            html {
                font-size: 15px;
            }

            body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                font-family: Helvetica, Arial, sans-serif;
                flex-direction: column;
            }

            h1 {
                font-size: 6rem;
            }

            span {
                display: inline-block;
            }

            h1.animate span {
                animation-name: var(--animation);
                animation-duration: 0.4s;
                animation-timing-function: ease-in-out;
                animation-delay: var(--delay);
            }

            @keyframes jump {
                0%,
                100% {
                    transform: translateY(0px);
                }
                50% {
                    transform: translateY(-10px);
                }
            }

            @keyframes pop {
                0%,
                100% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.15);
                }
            }

            @keyframes flip {
                0%,
                100% {
                    transform: rotateY(0deg);
                }
                50% {
                    transform: rotateY(90deg);
                }
            }

            @keyframes blink {
                0%,
                100% {
                    color: inherit;
                }
                50% {
                    color: yellow;
                }
            }

            @keyframes bubble {
                0% {
                    transform: translateY(200px);
                    opacity: 0;
                }
                70% {
                    transform: translateY(-50px);
                }
                100% {
                    transform: translateY(0px);
                    opacity: 1;
                }
            }
        </style>
    </head>
    <body>
        <h1>天行健，君子以自强不息</h1>

        <button data-animation="jump">JUMP</button>
        <button data-animation="pop">POP</button>
        <button data-animation="flip">FLIP</button>
        <button data-animation="blink">BLINK</button>
        <button data-animation="bubble">BUBBLE</button>

        <script>
            const h1 = document.querySelector("h1");
            // 正则替换所有单词为<span>单词</span>
            h1.innerHTML = h1.textContent.replace(/\S/g, "<span>$&</span>");

            document.querySelectorAll("span").forEach((span, index) => {
                span.style.setProperty("--delay", `${index * 0.1}s`);
            });

            document.querySelectorAll("button").forEach(button => {
                button.addEventListener("click", e => {
                    // 为了让一个事件处理函数，处理 4 种情况。通过私有属性区分要应用的不同动画。设置动画名称
                    h1.style.setProperty("--animation", e.target.getAttribute("data-animation"));

                    h1.classList.remove("animate");
                    // 移除 class 又立马添加同一个 class，浏览器会认为没有变化，不会渲染页面，所以需要强制回流，触发动画
                    void h1.offsetWidth;
                    h1.classList.add("animate");
                });
            });
        </script>
    </body>
</html>
